<script setup>
import { useRoute } from 'vue-router'
import { reactive, ref } from 'vue'
import { addAccount } from '@/api/user'
import { useUserStore, useSectorsStore } from "@/stores/counter";
import { roleToName, stateToName, roles, showMessage, nameToState } from '@/public/public.js';
import { getsectorstaffApi } from '@/api/sectors';


const userStore = useUserStore();
const token = userStore.userMsg.token;

const route = useRoute();
const id = route.query.id;


const sectorsStore = useSectorsStore();
let sectorsData = reactive([]);
sectorsStore.sectorsMsg.forEach(val => {
  sectorsData.push({
    sectorId: val.sectorId,
    sectorName: val.sectorName
  })
})

console.log('33333',  sectorsStore.sectorsMsg); 
//存放根据部门请求员工数据
let staffData = reactive([]);


const formSize = ref('default')
const accountForm = reactive({
  username: '',
  password: '',
  sectors: '',
  staff: '',
  role: '',
  state: ''
})


function submitForm (){
  let accountObj = {
    token: token,
    username: accountForm.username,
    password: accountForm.password,
    sectorId: accountForm.sectors,
    staffId: accountForm.staff,
    role: accountForm.role,
    state: nameToState(accountForm.state)
  };

  if (accountObj.username.length == 0) {
    showMessage('请输入用户名', 'warning', 2000);
    return;
  }
  if (accountObj.password.length == 0) {
    showMessage('请输入密码', 'warning', 2000);
    return;
  }
  if (accountObj.sectorId.length == 0) {
    showMessage('请选择部门', 'warning', 2000);
    return;
  }
  if (accountObj.staffId.length == 0) {
    showMessage('请选择员工', 'warning', 2000);
    return;
  }
  if (accountObj.role.length == 0) {
    showMessage('请选择角色', 'warning', 2000);
    return;
  }
  if (accountObj.state.length == 0) {
    showMessage('请选择状态', 'warning', 2000);
    return;
  }

  addAccount(accountObj).then(res => {
    console.log(res);

    if (res.data.code === 2) {
      showMessage(res.data.msg, 'success', 2000);
      clearForm();

    } else {
      showMessage(res.data.msg, 'warning', 2000);

    }
  }).catch(res => {
    showMessage(res.data.msg, 'error', 2000);
  });
}


//取消 功能
function cancelForm(){
  clearForm();

}
//清空表单数据
function clearForm(){
  accountForm.username = '';
  accountForm.password = '';
  accountForm.sectors = '';
  accountForm.staff = '';
  accountForm.role = '';
  accountForm.state = '';
}


function changeSector(val){
  if(!val)return;
  staffData.splice(0);
  requestStaffForsector(val);
}

function requestStaffForsector(sectorId){
  const obj = {
    token,
    sectorId,
  }
  console.log('===', obj);

  getsectorstaffApi(obj).then(res =>{
    console.log('-----', res);
    staffData.splice(0);

    const resData = res.data;
    if(resData.code === 1){
      resData.data.forEach(val =>{
        staffData.push({
          staffId: val.staffId,
          staffName: val.staffName
        });
      })
    }
    console.log('======',  staffData);
    accountForm.staff='';
  })
}


function startClickSelect(){
  if(!accountForm.sectors){
    showMessage('请先选择部门', 'error', 2000);
    return;
  }
}


</script>


<template>
  <div class="edit-account-header">
    <h3>添加账号</h3>
  </div>

  <el-form :model="accountForm" label-width="120px" class="demo-accountForm" :size="formSize" status-icon>
    <el-form-item label="用户名" prop="username">
      <el-input v-model="accountForm.username" class="el-form-item-username-input" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="accountForm.password" class="el-form-item-username-password" />
    </el-form-item>
    <el-form-item label="绑定员工" prop="['sectors','staff']">
      <el-select v-model="accountForm.sectors" placeholder="请选择部门" @change="changeSector">
        <el-option v-for="item in sectorsData" :label="item.sectorName" :value="item.sectorId" :key="item.sectorId" />
      </el-select>

      <i style="width:40px;"></i>
      <el-select 
      v-model="accountForm.staff" 
      placeholder="请选择员工"
      @click.native="startClickSelect"
      >
        <el-option v-for="item in staffData" :label="item.staffName" :value="item.staffId" :key="item.staffId" />
      </el-select>

    </el-form-item>
    <el-form-item label="角色分配" prop="role">
      <el-select-v2 v-model="accountForm.role" placeholder="请选择角色" :options="roles" />
    </el-form-item>

    <el-form-item label="状态" prop="state">
      <el-radio-group v-model="accountForm.state">
        <el-radio label="启用" />
        <el-radio label="禁用" />
      </el-radio-group>
    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click="submitForm()">保存</el-button>
      <i style="width: 60px;"></i>
      <el-button @click="cancelForm()">重置</el-button>
    </el-form-item>
  </el-form>
</template>

  
<style>
.edit-account-header {
  height: 50px;
  font-size: 16px;
  color: var(--el-color-primary);
}

.el-form-item-username-input{
  width: 230px;
}

.el-form-item-username-password{
  width: 230px;
}

</style>